<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="dns-prefetch" content="http://www.moji.com"/>
		<link rel="shortcut icon" href="https://cdn.moji.com/f5/assets/icon/favicon.ico">
		<link rel="apple-touch-icon" href="https://cdn.moji.com/f5/assets/icon/custom_icon.png">
		<link rel="apple-touch-icon" href="https://cdn.moji.com/f5/assets/icon/touch-icon-iphone-60.png">
		<link rel="apple-touch-icon" sizes="76x76" href="https://cdn.moji.com/f5/assets/icon/touch-icon-ipad-76.png">
		<link rel="apple-touch-icon" sizes="120x120" href="https://cdn.moji.com/f5/assets/icon/touch-icon-iphone-retina-120.png">
		<link rel="apple-touch-icon" sizes="152x152" href="https://cdn.moji.com/f5/assets/icon/touch-icon-ipad-retina-152.png">
		<link rel="stylesheet" href="commonCSS/commonInitialize.css" />
		<link rel="stylesheet" href="commonCSS/commonDisplayFlex.css" />
		<link rel="stylesheet" href="commonCSS/CSSLoadingAnimation01.css" />
		
		<!--调整根元素HTML的字体大小-->
		<script type="text/javascript">
			window.addEventListener("resize", function() {
				if(window.innerWidth < 376) {
					document.getElementsByTagName("html")[0].style.fontSize = (document.body.offsetWidth / 15) + "px";
					return;
				}

			});
			window.addEventListener("DOMContentLoaded", function() {
				if(window.innerWidth < 376) {
					document.getElementsByTagName("html")[0].style.fontSize = (document.body.offsetWidth / 15) + "px";
					
				}
				
			});
			/*window.addEventListener("beforeunload", function() {
				document.getElementsByClassName("loading1")[0].style.display = "block";
			});*/
			window.addEventListener("load", function() {
				document.getElementsByClassName("loading1")[0].remove();
				/*整个网页加载好后（包括图片等），就移除这个动画元素，应该可以减少DOM树的分支*/
			});
		</script>
		<!--页头、头部部分header样式表，这个可以通用的，组件化-->
		<link rel="stylesheet" href="indexCSS/indexHeaderArea.css" />
		<!--页脚部分footer样式表，这个可以通用的，组件化-->
		<link rel="stylesheet" href="footerCSS/footerCommonCSS.css" />
		<!--回到顶部的点击盒子的样式表，这个可以通用的，组件化-->
		<link rel="stylesheet" href="commonCSS/scrollToTopAnimation.css" />
		<!--可以通用的查询天气信息与列表展示的样式表，组件化-->
		<link rel="stylesheet" href="commonCSS/lookWeather.css" />
		
		<!--index.html的主体部分section样式表-->
		<link rel="stylesheet" href="indexCSS/indexSection.css" />
		
		<!--引入字体图标库font-awesome-->
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

	</head>

	<body class="min-width-280px">
		<!--这个网页加载动画元素的div要放在body下面的第一个子元素的位置，因为是要在加载后面的所有元素之前运行动画的-->
		<div class="loading1">
			<div class="loading01">
				<div>加载中，稍等……<br />loading……</div>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<style type="text/css">
			
		</style>
		<header id="header-area">
			<div class="min-width-280px">
				<div id="header-div1" class="display-flex flex-wrap flex-justify-space-around flex-align-items-center">
					<div id="website-icon" class="display-flex flex-align-items-center">
						<a href="http://www.moji.com">
							<img src="http://www.moji.com/templets/mojichina/img/icon/logo.png?v=2019100817" alt="天气网站图标" />
						</a>
						<a id="toggle-div" href="javascript:;"><i class="fa fa-align-justify"></i></a>
					</div>

					<div>
						<a href="javascript:;" id="city">
							<!--<i class="fa fa-stop-circle-o"></i>-->
							<img src="http://www.moji.com/templets/mojichina/img/icon/index_03.png" alt="" />
						</a>
						<!--<a href="javascript:;" id="location-icon">
							北京市
						</a>-->
						<a href="javascript:;" id="province">
							{{inputValue}}
						</a>

						<a href="javascript:;" id="temperature">
							{{nowTemperature}}℃
						</a>
						<a href="javascript:;" id="weather-phenomenon">
							<i class="fa fa-cloud"></i>
						</a>
						<div class="title">查天气</div>
					</div>

					

					<div class="display-flex flex-justify-space-around flex-align-items-center">
						<a href="http://www.moji.com/"><i class="fa fa-home"></i></a>
						<a href="http://www.moji.com/mjsoft"><i class="fa fa-download"></i></a>
						<a href="javascript:;" id="scan-code-download-app">
							<i class="fa fa-qrcode"></i>
							<div>
								<span class="triangle-span"></span>
								<img src="http://moji.com/templets/mojichina/img/icon/mojiqrcode.png" alt="扫码下载App" />
								<p>扫码下载App</p>
							</div>
						</a>
						<a href="javascript:;" class="look-more">
							<i class="fa fa-list-ul"></i> 更多
						</a>

					</div>
				</div>
			</div>
			<div id="contain-more-info" class="hide-scrollbar">
				<ul class="more-ul">
					<li>
						<a href="http://www.moji.com/"><strong>首页</strong></a>
					</li>
					<li>
						<a href="http://www.moji.com/mjsoft/"><strong>下载</strong></a>
					</li>
					<li>
						<a href="http://www.mojicb.com/"><strong>企业服务</strong></a>
					</li>
					<li>
						<a href="http://www.moji.com/news/"><strong>资讯</strong></a>
					</li>
					<li>
						<a href="http://www.moji.com/about/"><strong>关于墨迹</strong></a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="http://moji.com/templets/mojichina/img/icon/mojiqrcode.png" alt="下载墨迹客户端二维码链接图片" />
							<p>
								下载客户端
							</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<p>
								关注墨迹天气
							</p>
							<img src="http://moji.com/templets/mojichina/img/icon/qrcode2.png" alt="扫码关注墨迹天气二维码图片" />

						</a>
					</li>
				</ul>

			</div>
			
			<!--自动播放天气信息的盒子-->
			<div id="theme-video-div">
				<div>
					<video loop muted="muted" preload="metadata" id="theme-video" src="http://cdn.moji.com/websrc/video/winter20201106.mp4#t=5"></video>
					<div class="edition display-flex flex-direction-column flex-justify-center flex-align-content-space-around">
						<div>
							<img src="http://moji.com/templets/mojichina/img/index/index_15.png?v=2019100817" alt="让气象为世界发展赋能" />
							
						</div>
						<div class="edition-div">
							<a href="https://itunes.apple.com/cn/app/mo-ji-tian-qi-guan-fang/id434209233?mt=8" title="客户端、iPhone版下载">
								<div class="edition-img">
									<img src="http://moji.com/templets/mojichina/img/icon/index_23.png" alt="iPhone版下载" />
								</div>
								<div class="edition-description">
									<em>
										客户端下载
									</em>
									<br />
									<strong>
										8.6.6
									</strong>
								</div>
							</a>
						</div>
						<div class="edition-div">
							<a href="http://www.moji.com/android_down.php" title="客户端、Android版下载">
								<div class="edition-img">
									<img src="http://moji.com/templets/mojichina/img/icon/index_26.png" alt="Android版本下载" />
								</div>
								<div class="edition-description">
									<em>
										客户端下载
									</em>
									<br />
									<strong>
										8.6.7
									</strong>
								</div>
							</a>
						</div>
						
						
					</div>
				</div>
				
			</div>
			<!--查询天气并显示信息的div盒子-->
			<div id="lookWeather" class="min-width-280px hide-scrollbar" :style="{background: backgroundColor01, color: textColor01}">
				<div class="weatherDiv" v-cloak>
					<div class="hide-div">
						<a href="javascript:;">&times;</a>
					</div>
					<div class="weatherTitle">
						<div class="colorChange">
							<input title="改变阅读查询的背景颜色" type="color" v-model="backgroundColor01" />
							
						</div>
						<span>查询未来5天内天气信息</span>
						<br />
						<a @click="toggleTempeUnitType();" href="javascript:;">
							<strong>
								现温：{{nowTemperature + " "}}{{temperatureUnitType}}
							</strong>
							<br />
							<strong>
								时间：{{new Date().toLocaleString()}}
							</strong>
						</a>
					</div>
					<div>
						<label id="weatherInput">
							<div>
								<input autofocus type="text" v-model="inputValue" @keyup.enter="getWeather" 
									:placeholder="inputParam" />
								
							</div>
							<div @click="getWeather();">
								<span>
									搜索	
								</span>
							</div>
							
							
							
						</label>

					</div>
					<div id="metropolitansList">
						<a href="javascript:;">热门城市：</a>
						<a href="javascript:void;" @click="inputValue = '北京市'; getWeather();">北京市</a>
						<a href="javascript:void;" @click="inputValue = '上海市'; getWeather();">上海市</a>
						<a href="javascript:void;" @click="inputValue = '广州市'; getWeather();">广州市</a>
						<a href="javascript:void;" @click="inputValue = '深圳市'; getWeather();">深圳市</a>
						<a href="javascript:void;" @click="inputValue = '武汉市'; getWeather();">武汉市</a>
						<a href="javascript:void;" @click="inputValue = '南京市'; getWeather();">南京市</a>
						<a href="javascript:void;" @click="inputValue = '苏州市'; getWeather();">苏州市</a>
						<a href="javascript:void;" @click="inputValue = '无锡市'; getWeather();">无锡市</a>
						<a href="javascript:void;" @click="inputValue = '郑州市'; getWeather();">郑州市</a>
						<a href="javascript:void;" @click="inputValue = '昆明市'; getWeather();">昆明市</a>
						<a href="javascript:void;" @click="inputValue = '澳门'; getWeather();">澳门特别行政区</a>
						<a href="javascript:void;" @click="inputValue = '香港'; getWeather();">香港特别行政区</a>
					</div>
					<div class="remind-div" v-show="showDiv">
						点击过于频繁，
						<br />请每1秒后点击一次
					</div>
					<ul class="weatherUl">
						<li class="weatherLi" v-for="(item, i) in weatherDates">
							<!--<div>{{index === 0 ? "今天" : (new Date().getMonth() + 1) + "月 " + item.date.toString().substr(0, 3) }} </div>
							<div>{{item.date.toString().substring(3, item.date.toString().length)}}</div>
							<div>{{item.low.toString().substring(item.low.toString().indexOf("温") + 1, item.low.length)}} </div> 
							<div>{{item.high.toString().substring(item.high.toString().indexOf("温") + 1, item.high.length)}}</div>
							<div>{{item.type}}</div>
							<div>{{item.fengxiang}} </div> 
							<div>{{item.fengli.toString().replace(/\D/gi, "") + "级"}}</div>-->
							<div>{{item }} </div>
							<div>{{weatherWeekDays[i]}}</div>
							<div>{{weatherMinT[i] }}</div>
							<div>{{weatherMaxT[i] }} </div> 
							<div>{{weatherConditionType[i]}}</div>
							<div>{{weatherFengXiang[i]}}</div>
							<div>{{weatherFengLi[i]}}</div>
							<!--<div></div>-->
						</li>
					</ul>
					<div v-show="showEchartsDivBtn" id="click-show-temperature-chart">
						<a href="javascript:;">
						展示数据图表
						</a>
					</div>
					<!--一开始这个是隐藏的，不显示的-->
					<div id="con-father-div">
						<!--用来装echarts制图的效果的div盒子-->
						<div id="con1"></div>
						<div>&times;</div>
					</div>
					
				</div>
				
			</div>
		</header>
		<!--header区域结束 end-->
		<!--section区域开始 start-->
		<section id="section-area">
			
			<div id="character-description">
				<div id="back-img-div"><img id="back-img" src="http://www.moji.com/templets/mojichina/img/index/weather_bg.jpg" alt="" /></div>
				<!--position: absolute；的盒子，漂浮在这个描述优点、特点的大盒子父元素上-->
				<div id="weather-service-character">
					<div class="three-cascade-img-div">
						<!--三个图片的比例都是：宽度：1332；高度：1286-->
						<img src="http://www.moji.com/templets/mojichina/img/index/phone_bg.png?v=20191209_1" alt="" />
						<img src="http://www.moji.com/templets/mojichina/img/index/phone_wea.png?v=20191209_1" alt="" />
						<img src="http://www.moji.com/templets/mojichina/img/index/phone_forecast.png?v=20191209_1" alt="" />
						
					</div>
					<ul id="layout-description-ul" class="display-flex flex-justify-space-around flex-align-items-center flex-align-content-center">
						<li class="layout-description-li">
							<a href="javascript:;">
								<img src="http://www.moji.com/templets/mojichina/img/index/mainpagex2_07.png">
								<em>一款使用雷达图像显示的短时临近预报</em>
							</a>
						</li>
						<li class="layout-description-li">
							<a href="javascript:;">
								<img src="http://www.moji.com/templets/mojichina/img/icon/index_41.png" alt="" />
								<strong>分钟级</strong>
								<br />
								<em>短时预报精准到1分钟</em>
							</a>
							
						</li>
						<li class="layout-description-li">
							<a href="javascript:;">
								<img src="http://www.moji.com/templets/mojichina/img/icon/index_44.png" alt="" />
								<strong>公里级</strong>
								<br />
								<em>预报范围缩小到1公里</em>
							</a>
							
						</li>
						<li class="layout-description-li">
							<a href="javascript:;">
								<img src="http://www.moji.com/templets/mojichina/img/icon/index_47.png" alt="" />
								<strong>AI智能</strong>
								<br />
								<em>机器学习技术结合<br />传统数值模式系统</em>
							</a>
							
						</li>
						<li class="layout-description-li">
							<a href="javascript:;">
								<img src="http://www.moji.com/templets/mojichina/img/icon/index_50.png" alt="" />
								<strong>可视化</strong>
								<br />
								<em>全球预报数据可视化<br />高分辨率模式预报系统</em>
							</a>
							
						</li>
					</ul>
				</div>
			</div>
			<div id="down-list-div">
				<h2>点击下载相应的客户端</h2>
				<a href="http://www.moji.com/mjsoft/"><strong>更多版本  &gt;&gt;&gt; </strong></a>
				<!--下载列表开始，提供各个版本的App下载：如Android，iPad，Apple以及更多版本-->
				<div class="download-div">
					<ul class="display-flex flex-wrap flex-justify-space-around flex-align-content-center">
						<li>
							<a href="http://www.moji.com/android_down.php">
								<i class="fa fa-android"></i>
								<p>Android 8.6.7</p>
							</a>
						</li>
						<li>
							<a href="https://itunes.apple.com/cn/app/mo-ji-tian-qi-guan-fang/id434209233?mt=8">
								<i class="fa fa-apple"></i>
								<p>Apple 8.6.6</p>
							</a>
						</li>
						<li>
							<a href="http://download.moji001.com/download/MJTVWeather-mojiweb-release.apk">
								<i class="fa fa-tumblr-square"></i>
								<p>TV 1.1.1</p>
							</a>
						</li>
						<li>
							<a href="https://itunes.apple.com/cn/app//id487161848?mt=8">
								<img src="http://www.moji.com/templets/mojichina/img/icon/index_81.png" alt="iPad 2.8.1版本App下载" />
								<p>iPad 2.8.1</p>
							</a>
						</li>
						<li>
							<a href="javascript:;" class="scan-code-to-download">
								<i class="fa fa-qrcode"></i>
								<p>扫码下载</p>
								<img src="http://moji.com/templets/mojichina/img/icon/mojiqrcode.png" alt="扫码下载" />
								<span class="triangle-span"></span>
							</a>
						</li>
						<li>
							<a href="http://www.moji.com/mjsoft/">
								<i class="fa fa-flickr"></i>
								<p>更多版本</p>
							</a>
						</li>
					</ul>
				</div>
				
			</div>

		</section>
		<!--section区域结束 end-->
		<!--footer区域开始start-->
		<footer id="footer-area">
			
			<div id="toTop">
				<div title="回到顶部  to top">
					<a href="javascript:;">
						<i class="	fa fa-caret-up"></i>
						<br />
						to Top
					</a>
				</div>
			</div>
			<nav>
				<div id="province-cities-weather-forecast-div" class="display-flex flex-wrap flex-justify-space-around flex-align-content-start">
					<ul id="province-cities-weather-forecast-ul">
	
						<li>
							<ol class="related-links-ol">
								<li>今天预报</li>
								<li>
									<a href="https://tianqi.moji.com/today/china">今天省份表</a>
								</li>
								<li>
									<a href="https://tianqi.moji.com/today/china/jiangsu">今天城市列表</a>
								</li>
							</ol>
						</li>
						<li>
							<ol class="related-links-ol">
								<li>明天预报</li>
								<li>
									<a href="https://tianqi.moji.com/tommorrow/china">明天省份表</a>
								</li>
								<li>
									<a href="https://tianqi.moji.com/tommorrow/china/jiangsu">明天城市列表</a>
								</li>
							</ol>
						</li>
						<li>
							<ol class="related-links-ol">
								<li>后天预报</li>
								<li>
									<a href="https://tianqi.moji.com/tdat/china">后天省份表</a>
								</li>
								<li>
									<a href="https://tianqi.moji.com/tdat/china/jiangsu">后天城市列表</a>
								</li>
							</ol>
						</li>
	
						<li>
							<ol class="related-links-ol">
								<li>7天预报</li>
								<li>
									<a href="https://tianqi.moji.com/forecast7/china">7天预报省份表</a>
								</li>
								<li>
									<a href="https://tianqi.moji.com/forecast7/china/jiangsu">7天预报城市列表</a>
								</li>
							</ol>
						</li>
						<li>
							<ol class="related-links-ol">
								<li>10天预报</li>
								<li>
									<a href="https://tianqi.moji.com/forecast10/china">10天预报省份列表</a>
								</li>
								<li>
									<a href="https://tianqi.moji.com/forecast10/china/jiangsu">10天预报城市列表</a>
								</li>
							</ol>
						</li>
						<li>
							<ol class="related-links-ol">
								<li>15天预报</li>
								<li>
									<a href="https://tianqi.moji.com/forecast15/china">15天预报省份列表</a>
								</li>
								<li>
									<a href="https://tianqi.moji.com/forecast15/china/jiangsu">15天预报城市列表</a>
								</li>
							</ol>
						</li>
						<li>
							<ol class="related-links-ol">
								<li>空气指数</li>
								<li>
									<a href="https://tianqi.moji.com/aqi/china">空气指数省份列表</a>
								</li>
								<li>
									<a href="https://tianqi.moji.com/aqi/china/jiangsu">空气指数城市列表</a>
								</li>
							</ol>
						</li>
						<li>
							<ol class="related-links-ol">
								<li>pm2.5</li>
								<li>
									<a href="https://tianqi.moji.com/pm/china">pm2.5省份列表</a>
								</li>
								<li>
									<a href="https://tianqi.moji.com/pm/china/jiangsu">pm2.5城市列表</a>
								</li>
							</ol>
						</li>
						<li>
							<ol class="related-links-ol">
								<li>污染指数</li>
								<li>
									<a href="https://tianqi.moji.com/pollution/china">污染指数省份列表</a>
								</li>
								<li>
									<a href="https://tianqi.moji.com/pollution/china/jiangsu">污染指数城市列表</a>
								</li>
							</ol>
						</li>
						<li>
							<ol class="related-links-ol">
								<li>时景</li>
								<li>
									<a href="https://tianqi.moji.com/liveview/china">时景省份列表</a>
								</li>
								<li>
									<a href="https://tianqi.moji.com/liveview/china/jiangsu">时景城市列表</a>
								</li>
							</ol>
						</li>
	
					</ul>
	
				</div>
			</nav>
			
			
			<footer id="foot">
				<div id="company-icon">
					<a href="http://www.moji.com"><img src="http://www.moji.com/templets/mojichina/img/icon/index_95.png" alt="墨迹天气商业图标" /></a>
				</div>
				<div class="foot_nav">
			        <a href="http://www.moji.com/updata/android/" style="text-decoration:none">升级日志</a>
			        <a href="http://www.moji.com/faq/android/" style="text-decoration:none">常见问题</a>
			        <br />
			        <a href="https://html5.moji.com/tpd/agreement/agreement-zh_CN.html" style="text-decoration:none">服务协议</a>
			        <a href="https://www.12377.cn/" style="text-decoration:none">网上有害信息举报</a>
			        
			    </div>
			    <div class="foot_info">
			        <p>公司地址：北京市朝阳区来广营东路融新科技中心C座15层 </p>
			        <p>Copyright © 2009-2021北京墨迹风云科技股份有限公司 All Right Reserved </p>
			        <p>
			        	&copy;2021墨迹风云
			        	<a href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备10021324号</a> 
			        	<a href="javascript:;">互联网药品信息服务资格证书（京）非经营性-2016-0053</a>
			        	<i><img src="http://www.moji.com/templets/mojichina/img/icon/index_99.png">京公网安备 11010502030670号</i>
			        </p>
			        <p><a href="mailto:AS@moji.com">举报邮箱：AS@moji.com</a></p>
			        <p><a href="tel: 010-84798388">联系电话：010-84798388</a></p>
			        <p>
			        	<a href="tel: 400-880-0599">客服-热线：400-880-0599</a> 
		        	</p> 
		        	<p>
		        		<a href="tel: 010-84831730">违法和不良信息举报电话：<br />010-84831730 </a>  
			        </p>
			        
			    </div>
			</footer>
			
		</footer>
		
		<!--footer区域结束 end-->
		<!--
			我建议，以下JavaScript文件的引入顺序：
				1. 先引入Vuejs相关的，
				2. 再引入jQuery相关的，
				3. 再引入本文件index.html相关的JavaScript文件
		-->
		<script src="js/Vue压缩版文件引入.js"></script>
		<script src="js/axios.js"></script>
		<script src="js/lookWeather.js"></script>
		<!--
			1、以上挂载了 Vuejs 的实例与文件，是虚拟DOM，先加载的jQuery或JavaScript选择器等就不行了，
			2、所以要先引入Vue的文件，再引入原生JavaScript、jQuery等框架的文件，谨记！！！
		-->
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript" src="indexJS/index.js"></script>
		<!--echarts可视化制图javascript文件引入-->
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
		<script	src="indexJS/scrollToTopAnimation.js"></script>
	</body>

</html>